import type { ECharts } from 'echarts'
export const defaultUseBarScrollProp = {
  space: 2000,
  maxLen: 0,
  defaultStart: 0,
  defaultEnd: 1,
}
interface useBarScrollProps {
  space: number
  maxLen: number
  defaultStart: number
  defaultEnd: number
}
interface UseBarScrollReturn {
  timer: ReturnType<typeof setInterval> | undefined
  start: (arg_myChart: ECharts) => void
  stop: () => void
  zoomData: {
    start: number
    end: number
  }
  useChartMoveEvent: (arg_myChart: ECharts) => void
}
/**
 * 控制 ECharts 图表数据区域自动滚动的 Hook
 * @param props.space 滚动间隔时间(毫秒)
 * @param props.maxLen 数据总长度
 * @param props.defaultStart 默认起始位置
 * @param props.defaultEnd 默认结束位置
 * @returns 控制对象 - 包含操作方法及状态
 */
export const useChartBarScroll = (
  props: useBarScrollProps = defaultUseBarScrollProp,
): UseBarScrollReturn => {
  const { space, maxLen, defaultStart, defaultEnd } = props
  let timer: ReturnType<typeof setInterval> | undefined = undefined
  let myChart: ECharts
  const zoomData = {
    start: defaultStart,
    end: defaultEnd,
  }
  /**
   * 启动自动滚动
   * @param {ECharts} arg_myChart - ECharts实例
   */
  const start = (arg_myChart: ECharts) => {
    myChart = arg_myChart
    if (timer) {
      clearInterval(timer)
      timer = undefined
    }
    timer = setInterval(() => {
      zoomData.start += 1
      zoomData.end += 1
      if (zoomData.end > maxLen - 1) {
        zoomData.start = defaultStart
        zoomData.end = defaultEnd
      }
      myChart.setOption({
        dataZoom: [
          {
            type: 'slider', // 有type这个属性，滚动条在最下面，也可以不行，写y：36，这表示距离顶端36px，一般就是在图上面。
            startValue: zoomData.start,
            endValue: zoomData.end,
          },
        ],
      })
    }, space)
  }
  /**
   * 停止自动滚动
   */
  const stop = () => {
    clearInterval(timer)
    timer = undefined
  }
  /**
   * 绑定图表鼠标交互事件
   * @param {ECharts} [arg_myChart] - 可选传入的ECharts实例
   */
  const useChartMoveEvent = (arg_myChart: ECharts) => {
    if (arg_myChart) {
      myChart = arg_myChart
    }
    const targetEl: HTMLElement = myChart.getDom()
    targetEl.addEventListener('mouseout', () => {
      if (timer) return
      let dataZoomMove_get = {
        startValue: defaultStart,
        endValue: defaultEnd,
      }
      const dataZoom = myChart.getOption().dataZoom as { startValue: number; endValue: number }[]
      if (dataZoom && dataZoom.length > 0) {
        dataZoomMove_get = dataZoom[0]
      }
      zoomData.start = dataZoomMove_get.startValue
      zoomData.end = dataZoomMove_get.endValue
      start(myChart)
    })
    targetEl.addEventListener('mouseover', () => {
      stop()
    })
  }
  return {
    timer,
    start,
    stop,
    zoomData,
    useChartMoveEvent,
  }
}
export const EchartsDataZoomConfig = (start = 0, end = 1) => {
  return [
    {
      show: false, // 为true 滚动条出现
      realtime: true,
      type: 'slider', // 有type这个属性，滚动条在最下面，也可以不行，写y：36，这表示距离顶端36px，一般就是在图上面。
      height: '90%', // 表示滚动条的高度，也就是粗细
      startValue: start, // 表示默认展示20%～80%这一段。
      endValue: end,
      width: 0,
      right: '20',
      top: '20%', //位置和grid配置注意下
      yAxisIndex: [0], //关联多个y轴
      moveHandleStyle: {
        color: 'rgba(89, 202, 241,.5)',
      },
      moveHandleSize: '6',
      emphasis: {
        moveHandleStyle: {
          color: 'rgba(89, 202, 241,.5)',
        },
      },
      textStyle: {
        color: 'rgba(255,255,255,0)',
      },
      backgroundColor: 'rgba(255,255,255,.1)',
      borderColor: 'rgba(255,255,255,0)',
      fillerColor: 'rgba(0,0,0,0)',
      handleSize: '6',
      handleStyle: {
        color: 'rgba(255,255,255,0)',
      },
      brushStyle: {
        color: 'rgba(129, 243, 253)',
      },
    },
    {
      //没有下面这块的话，只能拖动滚动条，鼠标滚轮在区域内不能控制外部滚动条
      type: 'inside',
      yAxisIndex: 0,
      zoomOnMouseWheel: false, //滚轮是否触发缩放
      moveOnMouseMove: true, //鼠标滚轮触发滚动
      moveOnMouseWheel: true,
    },
  ]
}
